<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<title></title>
<style>
	*{
		margin: 0;
		padding: 0;
		font-size: 12px;
	}
	ul{
		list-style: none;
	}
	a{
		text-decoration: none;
	}
	.wrapper{
		width: 298px;
		height: 248px;
		margin:100px auto 0;
		border: 1px solid burlywood;
		overflow: hidden;
	}
	#left,#center,#right{
		float: left;
	}
	#left li,#right li{
		background: url(./img/lili.jpg)repeat-x;
	}
	#left li a,#right li a{
		display: block;
		width: 48px;
		height: 27px;
		border-bottom: 1px solid burlywood;
		line-height: 27px;
		text-align: center;
		color:black;
	}
	#left li a:hover,#right li a:hover{
		color: #fff;
		background-image: url(./img/abg.gif);
	}
	#center{
		border-left: 1px solid burlywood;
		border-right: 1px solid burlywood;
	}
	img{
		width: 200px;
		height: 250px;
	}
</style>
</head>
<body>
	<div class="wrapper">
		<ul id='left'>
			<li><a href="#">登山鞋</a></li>
			<li><a href="#">男毛衣</a></li>
			<li><a href="#">男棉服</a></li>
			<li><a href="#">男士马靴</a></li>
			<li><a href="#">男士包包</a></li>
			
			<li><a href="#">皮衣</a></li>
			<li><a href="#">皮带</a></li>
			<li><a href="#">雪地靴</a></li>
			<li><a href="#">男士围巾</a></li>
		
	
		</ul>
		<ul id='center'>
			<li><a href="#"><img src="img/登山鞋.jpg"></a></li>
			<li><a href="#"><img src="img/男毛衣.jpg"></a></li>
			<li><a href="#"><img src="img/男棉服.jpg"></a></li>
			<li><a href="#"><img src="img/男士马靴.jpg"></a></li>
			<li><a href="#"><img src="img/男士包包.jpg"></a></li>
			
			
			<li><a href="#"><img src="img/皮衣.jpg"></a></li>
			<li><a href="#"><img src="img/皮带.jpg"></a></li>
			<li><a href="#"><img src="img/男士雪地靴.jpg"></a></li>
			<li><a href="#"><img src="img/男士围巾.jpg"></a></li>
			
			
			<li><a href="#"><img src="img/女肩包.jpg"></a></li>
			<li><a href="#"><img src="img/女裤.jpg"></a></li>
			<li><a href="#"><img src="img/女士马靴.jpg"></a></li>
			<li><a href="#"><img src="img/牛仔裤.jpg"></a></li>
			<li><a href="#"><img src="img/毛衣.jpg"></a></li>
			
			<li><a href="#"><img src="img/军大衣.jpg"></a></li>
			<li><a href="#"><img src="img/羽绒服.jpg"></a></li>
			<li><a href="#"><img src="img/冬裙.jpg"></a></li>
			<li><a href="#"><img src="img/女棉服.jpg"></a></li>
			
			
		</ul>
		<ul id='right'>
			<li><a href="#">女肩包</a></li>
			<li><a href="#">女裤</a></li>
			<li><a href="#">女士马靴</a></li>
			<li><a href="#">牛仔裤</a></li>
			<li><a href="#">毛衣</a></li>
			
			<li><a href="#">军大衣</a></li>
			<li><a href="#">羽绒服</a></li>
			<li><a href="#">冬裙</a></li>
			<li><a href="#">女棉服</a></li>
		
		</ul>
	</div>
	<script>
		//入口函数
		$(function(){
			$("#left>li").mouseover(function(){
				let index=$(this).index();
				let img=$('#center>li:eq('+index+')')
				img.siblings().hide();
				img.show();
			})
				$("#right>li").mouseover(function(){
					let index=$(this).index()+9;
					let img=$('#center>li:eq('+index+')')
					img.siblings().hide();
					img.show();
				
		})
	})
	</script>
</body>
</html>
